<template>
<div class="bg">
	<div class="login">
	<!--label-position="top"定对齐-->
		<div class="login-img"><img src="../../assets/image/login-img.png"/></div>
		<el-form :model="formData" status-icon ref="formData" :rules="loginRules" label-position="top" label-width="100px" class="demo-ruleForm loginForm">
		  <h3>体简--智慧体育课堂</h3>
		  <el-form-item label="用户名" prop="login">
		    <el-input v-model="formData.login"></el-input>
		  </el-form-item>
		  <el-form-item  label="密码" prop="pwd">
		    <el-input v-model="formData.pwd" type="password" autocomplete="off" @keyup.enter.native="login"></el-input>
		  </el-form-item>
		  <!-- <el-form-item class="verification"  label="验证码" prop="pwd">
		    <el-input class="verificationInput" autocomplete="off" v-model="formData.code"></el-input>
			<img id="imgs" src="http://192.168.1.113/login/code" alt="" onClick="this.src='http://192.168.1.113/login/code?id='+Math.random()">
		  </el-form-item> -->
		  <div>
			  <el-radio class="radio" v-model="formData.type" label="1" @keyup.enter.native="login">管理员</el-radio>
			  <el-radio class="radio" v-model="formData.type" label="2" @keyup.enter.native="login">教师</el-radio>
		  </div>
		  <el-form-item>
		    <el-button class="log-btn" type="primary" @click='login'>登录</el-button>
		  </el-form-item>
		</el-form>
		<!--<div class="footer">-->
	      <!--<p>胜狮科技 版权所有©2018-2019 咨询邮箱：shengshi005@163.com</p>-->
    <!--</div>-->
	</div>
</div>

</template>

<script>
	export default {
		data(){
			var funChina = (rule, value, callback) => {
		      if (!value) {
		        return callback(new Error('不可为空'))
		      } else {
		        const regs = /^[0-9a-zA-Z]+$/
		        if (regs.test(value)) {
		          callback()
		        } else {
		          return callback(new Error('账号只可为数字与字母'))
		        }
		      }
		    }
			return {
				type:'',
				formData:{
					login:'',
					pwd:'',
					type:'',
					//code:'',
				},
				loginRules:{
					login:[
						{required: true, trigger: ['blur', 'change'], validator: funChina},
						{mix: 11, message: '用户名长度最少3位', trigger: ['blur', 'change']}
					],
					pwd:[
						{required: true, message: '请输入密码', trigger: ['blur', 'change']},
						{min: 5, message: '密码长度最少为6位', trigger: ['blur', 'change']}
					]
				}
			}
		},
		methods:{
			login(){
				this.$http.post('/api/login/userLogin',this.formData)
					.then(res=>{
						if(res.data.code == 200){
							this.$message({
                  message: res.data.msg,
                  type:'success'
					    })
              //保存token
              sessionStorage.setItem('token',res.data.token)
              //保存用户名
              localStorage.setItem('username',res.data.name)
              //保存学校名
              localStorage.setItem('schoolname',res.data.school_name)
              //保存身份
              localStorage.setItem('rule',res.data.rule)
              this.$router.push('/home')
						}else if (res.data.errorCode){
							this.$message({
					          message:res.data.msg,
					          type: 'warning'
              });
            }
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.bg {
		height: 100%;
		background-color: #9cbf83;
		.login {
			position:relative;
			clear: both;
			.login-img {
				//line-height: 50%;
				position: absolute;
				left: 20%;
				top: 10rem;
			}
			.loginForm {
				width: 350px;
				background: #fff;
				padding:20px 30px;
				border-radius: 10px;
				position: absolute;
				left: 60%;
				top: 200px;
				.log-btn {
					width: 100%;
					margin-top: 10px;
				}
			}
			/deep/label.el-form-item__label {
				padding: 0;
			}
			.verification {
				.verificationInput{
					width: 100px;
					display: inline-block;
				}

				#imgs {
					display: inline-block;
					margin-top: 10px;
					height: 38px;
					vertical-align:bottom;
				}
			}
			.footer{
			    position: absolute;
			    width: 100%;
			    bottom: -20px;
			    // display: inline-block;
			    // left: 0;
			    p{
			      text-align: center;
			      font-size: 12px;
			      color: #999;
			    }
			}
		}

	}
</style>
